<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul,
      li {
        list-style: none;
        padding: 0px;
      }
      .mail_head li h2,
      h3,
      h4 {
        display: inline;
      }
      .title {
        color: #fff !important;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.dark.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.css"
    />
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.0.5/redux.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-redux/7.2.2/react-redux.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-transition-group/4.4.1/react-transition-group.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.10.3/antd.min.js"></script>
    <script src="https://cdn.bootcss.com/EventEmitter/5.2.4/EventEmitter.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component } = React
      const { Input, Card, Button, Carousel } = antd
      const { TextArea } = Input

      const data = Mock.mock({
        'datas|10-50': {
          id: '@id',
          title: '@title',
          mailContent: '@paragraph',
          name: '@cname',
          tel: /^1(5|3|7|8)[0-9]{9}$/,
          address: '@county(true)',
          avtar: "@Image('200x100', 'EasyMock')"
        }
      })

      class MailDetail extends Component {
        state = { datas: data.datas }
        render() {
          return <ReplyMailDetail></ReplyMailDetail>
        }
      }
      function MailHead(props) {
        const { datas, newState } = props
        return (
          <div className="mail_head">
            <ul>
              <li>
                <h4>标题:</h4> &nbsp;
                {datas.title}
              </li>
              <li>
                <h4>姓名:</h4> &nbsp;
                {datas.name}
              </li>
              <li>
                <h4>地址:</h4> &nbsp;
                {datas.address}
              </li>
              <li>
                {newState && <h4>电话: &nbsp;</h4>}
                {newState && newState.tel}
              </li>
            </ul>
          </div>
        )
      }
      function MailBody(props) {
        const { datas } = props
        return <div>{datas.mailContent}</div>
      }

      class ReplyMailDetail extends Component {
        state = { datas: data.datas }
        render() {
          const { newState, replyBox } = this.props

          return (
            <div style={{ margin: '40px 40px' }}>
              <Card title="来自测试邮件" extra={<a href="#">More</a>}>
                <MailHead
                  datas={this.state.datas}
                  newState={newState}
                ></MailHead>
                <MailBody datas={this.state.datas}></MailBody>
                <br />
                {replyBox && replyBox()}
              </Card>
            </div>
          )
        }
      }
      const replyMailDetailProps = {
        replyBox: () => {
          return <Reply></Reply>
        },
        newState: {
          tel: data.datas.tel
        }
      }
      function Reply() {
        return (
          <div>
            <TextArea
              maxLength={200}
              style={{ width: '100%', resize: 'none' }}
              placeholder="最多200个字符"
              rows={5}
            />
            <br />
            <br />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button type="default">取消</Button>
              <Button type="primary">发送</Button>
            </div>
          </div>
        )
      }

      function onChange(a, b, c) {
        console.log(a, b, c)
      }

      let App = (
        <div style={{ background: '#364D79' }}>
          <h3 className="title">通用组件设计</h3>
          <Carousel autoplay afterChange={onChange}>
            <div>
              <ReplyMailDetail {...replyMailDetailProps} />
            </div>
            <div>
              <MailDetail />
            </div>
          </Carousel>
        </div>
      )
      ReactDOM.render(App, document.getElementById('root'))
    </script>
  </body>
</html>
